<template>
	<view class="statPage">
		<view class="top">{{curBook}}</view>
		<veiw class="todayStudy">
			<view class="titleBox">
				<uni-icons type="notification" size="20" color="#4877f4"></uni-icons>
				<text class="text">今日学习</text>
			</view>
			<view class="todayStudyContent content">
				<view class="itemBox">
					<view class="count">
						{{today.count}}
					</view>
					<view class="text">学习数量</view>
				</view>
				<view class="itemBox">
					<view class="count">
						{{today.time}}
					</view>
					<view class="text">学习时常（分钟）</view>
				</view>
			</view>
		</veiw>

		<veiw class="sumData">
			<view class="titleBox">
				<uni-icons type="wallet" size="20" color="#3DB0B0"></uni-icons>
				<text class="text">合计数据</text>
			</view>
			<view class="sumDataContent content">
				<view class="itemBox">
					<view class="text">总共学</view>
					<view class="count">
						{{sumData.sumDay}}<text class="text">天</text>
					</view>
				</view>
				<view class="itemBox">
					<view class="text">总共打卡</view>
					<view class="count">
						{{sumData.clockDay}}<text class="text">天</text>
					</view>

				</view>
				<view class="itemBox">
					<view class="text">已经掌握</view>
					<view class="count">
						{{sumData.learnedCount}}<text class="text">词</text>
					</view>

				</view>
				<view class="itemBox">
					<view class="text">总学习时长</view>
					<view class="count">
						{{sumData.learnTime}}<text class="text">分钟</text>
					</view>

				</view>
			</view>
		</veiw>
		<veiw class="clockBox">
			<view class="titleBox">
				<uni-icons type="calendar" size="20" color="#F07A7A"></uni-icons>
				<text class="text">打卡统计</text>
			</view>
			<view class="clockContent content">
				
			</view>
		</veiw>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curBook: "当前课本:十天搞定六级词汇便携版",
				today: {
					count: 0,
					time: 0,
				},
				sumData: {
					sumDay: 5,
					clockDay: 5,
					learnedCount: 10,
					learnTime: 20,
				},

			}
		},
		methods: {

		}
	}
</script>

<style>
	.statPage {
		width: 21.06rem;
		height: 4.63rem;
		margin: 0 auto;
	}

	.top {
		width: 20.06rem;
		height: 2rem;
		padding: 0 0.5rem;
		margin: 0 auto;
		margin-top: 0.3rem;
		line-height: 2rem;
		border-radius: 0.31rem;
		background-color: rgba(131, 142, 199, 0.06);
		color: rgba(131, 142, 199, 1);
		font-size: 0.75rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}

	.titleBox {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin: 2rem 0 0.5rem 0;
	}

	.titleBox .text {
		color: rgba(16, 16, 16, 1);
		font-size: 0.75rem;
		text-align: left;
		font-family: PingFangSC-semiBold;
		margin-left: 0.2rem;
	}

	.content {
		display: flex;
		align-items: center;
		width: 21.06rem;

	}

	.content .count {
		color: rgba(16, 16, 16, 1);
		font-size: 1.75rem;
		text-align: center;
		font-family: PingFangSC-regular;
	}

	.content .text {
		color: rgba(102, 102, 102, 1);
		font-size: 0.63rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}

	.todayStudyContent {
		justify-content: space-around;
		height: 4.63rem;
		border-radius: 0.63rem;
		background-color: #ffffff;
	}

	.sumDataContent .itemBox {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 0.5rem 0 0 2rem;
		width: 8rem;
		height: 3.44rem;
		border-radius: 0.31rem;
		background-color: #fff;
		color: rgba(16, 16, 16, 1);
		font-size: 0.88rem;
		text-align: center;
		font-family: -apple-system;
		margin-top: 1rem;
	}

	.sumDataContent {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.sumDataContent .text {
		color: rgba(51, 51, 51, 1);
		font-size: 0.69rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}

	.sumDataContent .itemBox .count{
		color: rgba(16, 16, 16, 1);
		font-size: 1.56rem;
		text-align: center;
		font-family: PingFangSC-semiBold;
	}
	.sumDataContent .itemBox .count .text {
		margin-left: 0.8rem;
	}
	
</style>